<template>
	<view>
		<view class="header">
			<view class="top">
				<view class="header-icon">
				    <view class="left">
				        <view>
				            <image src="../../static/image/chushi.png" mode=""></image>
				            <image src="../../static/image/chushi.png" mode=""></image>
				            <image src="../../static/image/chushi.png" mode=""></image>
				            <image src="../../static/image/chushi.png" mode=""></image>
				            <image src="../../static/image/chushi.png" mode=""></image>
				            <image src="../../static/image/chushi.png" mode=""></image>
				        </view>
				        <text>5593人已开通会员</text>
				    </view>
				    <text>购买查询</text>
				</view>
			</view>
			<view class="bottom">
				<view class="ab-header">
					<image src="../../static/image/chushi.png" mode=""></image>
					<view>
						<text>立即登录</text>
						<text>会员</text>
						<text>\n</text>
						<text>开通会员尊享VIP权益</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="top">
				<view class="in">
					<view class="active_top_in">
						<text>12个月</text>
						<text>￥45</text>
						<text>￥144</text>
						<view class="top-in-ab">
							<text>推荐</text>
						</view>
					</view>
					<view>
						<text>3个月</text>
						<text>￥18</text>
						<text>￥36</text>
					</view>
					<view>
						<text>1个月</text>
						<text>￥8</text>
						<text>￥14</text>
					</view>
				</view>
				<view class="un">
					<view>
						<text>恭喜</text>
						<text>您获得2折开通会员特权！</text>
					</view>
					<view>
						<text @click="nowVip">立即开通</text>
					</view>
				</view>
			</view>
			<view class="main-line">
				
			</view>
			<view class="middle">
				<text>VIP特权</text>
				<view class="outer">
					<view>
						<image src="../../static/image/book.png" mode=""></image>
					</view>
					<view>
						<text>1000+精品名厨菜谱</text>
						<text>大咖教学，轻松学会</text>
					</view>
				</view>
				<view class="outer">
					<view>
						<image src="../../static/image/NEW.png" mode=""></image>
					</view>
					<view>
						<text>每周上新</text>
						<text>新菜持续更新中</text>
					</view>
				</view><view class="outer">
					<view>
						<image src="../../static/image/goAd.png" mode=""></image>
					</view>
					<view>
						<text>会员免广告打扰</text>
						<text>体验更流畅</text>
					</view>
				</view><view class="outer">
					<view>
						<image src="../../static/image/huangV.png" mode=""></image>
					</view>
					<view>
						<text>VIP尊贵身份标识</text>
						<text>随时随地，与众不同</text>
					</view>
				</view>
			</view>
			<view class="main-line">
				
			</view>
			<view class="bottom">
				<text>会员使用说明</text>
				<text>1.会员服务一经开通，不支持退款；</text>
				<text>2.如遇到苹果手机支付问题，建议参考APPstore支付流程；</text>
				<text>3.若会员开通出现异常，请立即联系客服，我们会在2个工作日内出处理结果；</text>
				<text>4.会员常见问题、会员服务协议、会员隐私协议；</text>
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="modleHtml" v-if="isModule">
			<view class="top">
				<view class="top-line">
					<text @click="deleteUp">X</text>
					<text>开通VIP会员</text>
				</view>
				<view class="in">
					<view class="active_top_in">
						<text>12个月</text>
						<text>￥45</text>
						<text>￥144</text>
						<view class="top-in-ab1">
							<text>即将涨价</text>
						</view>
					</view>
					<view>
						<text>3个月</text>
						<text>￥18</text>
						<text>￥36</text>
					</view>
					<view>
						<text>1个月</text>
						<text>￥8</text>
						<text>￥14</text>
					</view>
				</view>
				<view class="un">
					<view>
						<text>恭喜</text>
						<text>您获得2折开通会员特权！</text>
					</view>
					<view>
						<text @click="goToBuy">立即购买</text>
					</view>
				</view>
			</view>
			<view class="main-line">
				
			</view>
			<view class="middle">
				<text>VIP特权</text>
				<view class="outer">
					<view>
						<image src="../../static/image/book.png" mode=""></image>
					</view>
					<view>
						<text>1000+精品名厨菜谱</text>
						<text>大咖教学，轻松学会</text>
					</view>
				</view>
				<view class="outer">
					<view>
						<image src="../../static/image/NEW.png" mode=""></image>
					</view>
					<view>
						<text>每周上新</text>
						<text>新菜持续更新中</text>
					</view>
				</view><view class="outer">
					<view>
						<image src="../../static/image/goAd.png" mode=""></image>
					</view>
					<view>
						<text>会员免广告打扰</text>
						<text>体验更流畅</text>
					</view>
				</view><view class="outer">
					<view>
						<image src="../../static/image/huangV.png" mode=""></image>
					</view>
					<view>
						<text>VIP尊贵身份标识</text>
						<text>随时随地，与众不同</text>
					</view>
				</view>
			</view>
			<view class="main-line">
				
			</view>
			<view class="bottom">
				<text>会员使用说明</text>
				<text>1.会员服务一经开通，不支持退款；</text>
				<text>2.如遇到苹果手机支付问题，建议参考APPstore支付流程；</text>
				<text>3.若会员开通出现异常，请立即联系客服，我们会在2个工作日内出处理结果；</text>
				<text>4.会员常见问题、会员服务协议、会员隐私协议；</text>
			</view>
		</view>
		<!-- 覆盖层 -->
		<view class="fugai" v-if="isModule">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isModule:false
			}
		},
		methods: {
			nowVip(){
				this.isModule=true
			},
			goToBuy(){
				uni.navigateTo({
					url:"#"
				})
			},
			deleteUp(){
				this.isModule=false
			}
		}
	}
</script>

<style scoped lang="scss">
.header{
	width: 100%;
	height: 400rpx;
	.top{
		height: 80%;
		background-color: #313131;
		border-bottom-left-radius:100rpx ;
		border-bottom-right-radius: 100rpx;
		.header-icon{
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding-top: 20rpx;
			width: 99%;
			margin: 0 auto;
			>text{
				color: #ffffff;
				font-size: 25rpx;
				margin-right: 30rpx;
			}
			.left{
				width: 51%;
				height: 50rpx;
				box-sizing: border-box;
				padding-top: 10rpx;
				display: flex;
				font-size: 20rpx;
				color: #ffffff;
				justify-content: space-between;
				background-color: #5c5c5c;
				border-radius: 0 20rpx  20rpx 0;
				>text{
					margin-right: 17rpx;
				}
				>view{
					display: flex;
					justify-content: center;
					margin-left: 15rpx;
					image{
						width: 30rpx;
						height: 30rpx;
						position: relative;
					}
					image:nth-of-type(2){
						left: -6rpx;
					}image:nth-of-type(3){
						left: -12rpx;
					}image:nth-of-type(4){
						left: -18rpx;
					}image:nth-of-type(5){
						left: -24rpx;
					}image:nth-of-type(6){
						left: -30rpx;
					}
				}
			}
		}
	}
	.bottom{
		height: 20%;
		position: relative;
		.ab-header{
			position: absolute;
			width: 90%;
			height: 290rpx;
			background-color: #fbedc5;
			bottom: 0rpx;
			left: 38rpx;
			display: flex;
			align-items: center;
			border-radius: 10rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				margin-left: 30rpx;
			}
			>view{
				padding-top: 5rpx;
				margin-left: 10rpx;
				text:nth-of-type(1){
					color: #a48752;
					font-weight: 500;
					font-size: 40rpx;
				}
				text:nth-of-type(2){
					color: #fbedc5;
					font-size: 23rpx;
					padding: 0 25rpx;
					border-radius: 20rpx;
					background-color:#a5a5a5 ;
					margin-left: 10rpx;
				}
				text:nth-of-type(4){
					color: #a68a54;
					font-size: 25rpx;
				}
			}
		}
	}
}
.main,.modleHtml{
	.top{
		overflow: hidden;
		.in{
			display: flex;
			justify-content: space-around;
			margin-top: 50rpx;
			>view{
				width: 180rpx;
				height: 220rpx;
				border: 1rpx solid #ccc;
				border-radius: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				position: relative;
				.top-in-ab{
					width: 50rpx;
					height: 30rpx;
					color: #ffffff;
					background: url(../../static/image/deg.png);
					background-size: cover;
					font-size: 25rpx;
					font-weight: bold;
					padding: 0 5rpx;
					position: absolute;
					top: -20rpx;
					left: -5rpx;
				}
				&.active_top_in{
					border: 1rpx solid #deb164;
					background-color: #F8F8F8;
				}
				text:nth-of-type(1){
					font-weight: bold;
				}
				text:nth-of-type(2){
					font-weight: 600;
					font-size: 45rpx;
					color: #deb164;
				}
				text:nth-of-type(3){
					font-weight: bold;
					color: #ccc;
					text-decoration: line-through;
				}
			}
		}
		.un{
			margin-top: 20rpx;
			>view:nth-of-type(1){
				display: flex;
				text:nth-of-type(1){
					font-size: 22rpx;
					padding:0  10rpx;
					background-image: url(../../static/image/deg.png);
					background-size: cover;
					background-repeat: no-repeat;
					color:  #fae3b1;
					margin-left: 35rpx;
				}
				text:nth-of-type(2){
					font-size: 20rpx;
					color: #af9359;
					margin-left: 10rpx;
				}
			}
			>view:nth-of-type(2){
				width: 90%;
				margin: 30rpx auto;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background-color: #fae3b1;
				color:#af9359 ;
				font-weight: bold;
				border-radius: 10rpx;
			}
		}
	}
	.main-line{
		height: 25rpx;
		background-color: #f5f5f5;
	}
	.middle{
		overflow: hidden;
		>text{
			font-weight: bold;
			margin-left: 30rpx;
			margin-top: 20rpx;
		}
		>.outer{
			display: flex;
			margin-left: 30rpx;
			>view:nth-of-type(1){
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				background-color:#fcf1d3;
				border-radius: 50%;
				margin: 20rpx 0;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-top: 10rpx;
				}
			}
			>view:nth-of-type(2){
				display: flex;
				flex-direction: column;
				margin: 20rpx 20rpx;
				>text:nth-of-type(1){
					font-size: 20rpx;
					font-weight: bold;
					margin-top: 5rpx;
				}
				>text:nth-of-type(2){
					font-size: 16rpx;
					color: #ccc;
				}
			}
		}
	}
	.bottom{
		font-size: 16rpx;
		color: #ccc;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-left: 30rpx;
		margin-bottom: 50rpx;
		>text:nth-of-type(1){
			font-size: 25rpx;
			color: #000000;
			font-weight: bold;
			margin: 15rpx 0;
		}
	}
}
.modleHtml{
	position: absolute;
	width: 100%;
	top: 600rpx;
	z-index: 22;
	background-color: #ffffff;
	overflow: hidden;
	.top-line{
		color: #333333;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 25rpx;
		margin-top: 15rpx;
		text:nth-of-type(1){
			color: #deb164;
			font-size: 30rpx;
			margin-left: 30rpx;
		}
		text:nth-of-type(2){
			margin-left: 270rpx;
		}
	}
	.top-in-ab1{
		width: 100rpx;
		height: 30rpx;
		color: #ffffff;
		background-color: #e7474b;
		font-size: 25rpx;
		font-weight: bold;
		padding: 0 5rpx;
		position: absolute;
		top: -20rpx;
		left: -5rpx;
		border-radius: 10rpx 0 10rpx 0;
	}
}
.fugai{
	background-color: rgba(0, 0, 0,0.3);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
</style>
